/**
 * Created by fangshufeng on 2018/4/23.
 */

import React, {Component} from 'react'

import {Table, Tag, Button} from 'antd'
import  {connect} from 'react-redux'
import  {clear_data_list,select_one_data,__APP_SELECT_TYPE_ALL_LIST_,__APP_SELECT_TYPE_MOCK_LIST_} from '../redux/app.redux'
const columns = [
    {
        title: '请求状态', dataIndex: 'status', key: 'status', fixed: 'left', width: 80,
        render: (text, record) => {
            let color = undefined;
            if (record.isMock) {
                color = '#108ee9';
            } else {
                color = record.status !== 200 ? '#f50' : '#87d068'
            }
            return <Tag color={color}>{text}</Tag>
        }
    },
    {title: '请求路径', dataIndex: 'url', key: 'url',render:(text,record) => <div style={{color: record.isSelected ? 'blue' : 'rgba(0, 0, 0, 0.65)'}}>{text}</div>},
];

//数据格式
// {
//     config: {
//         method: 'get',
//         url: '"https://m.sit.nonobank.com/feserver/account/balance?appId=nono&bizCode=0&noncestr=utviqurtzaapahfloqixuciuk&onlyBalance=0&signature=ba63385c1d1f9fa0b839f407357237c2&timestamp=1524471904858"',
//
//     },
//     data:{
//     },
//     status:200,
//     isMock:false
// }

class AllRequestList extends Component {

    constructor(props){
        super(props);
    }

    _row_select_state = v => {
        /**
         * 1.如果选中了mock列表，所有数据都应该标记为为选中
         * 2.如果当前选中的数据uniqueID和列表的数据相等则标识为选中
         */
        const {uniqueID} = this.props.current_select_data;
        const {select_type} = this.props;
        return select_type === __APP_SELECT_TYPE_MOCK_LIST_ ? false : v.uniqueID === uniqueID
    };

    render() {
        // console.log('索引值',this.props.data_list.indexOf(this.props.current_select_data));
        const mapList = this.props.data_list.map((v,index) => {
            return {
                status: v.isMock ? 'mock' : v.status,
                url: v.config.urlIdentification,
                isMock: v.isMock,
                key:index,
                source_data:v, //之所以保留旧的数据，防止并发操作，导致索引不准确,
                isSelected: this._row_select_state(v)
            }
        });

        return <div style={{...this.props.style, display: 'flex', flexDirection: 'column'}}>
            <div style={style.head}>
                <div style={style.head.titleStyle}>所有请求列表</div>
                <Button style={style.head.cleanBtnStyle} onClick={() => this.props.clear_data_list() }>清空</Button>
            </div>

            <Table columns={columns}
                   dataSource={mapList}
                   scroll={{x: 500, y: 300}}
                   pagination={false}
                   showHeader={false}
                   bordered={true}
                   style={style.table}
                   rowKey={record => record.key}
                   onRowClick={record=>this.props.select_one_data(record.source_data,__APP_SELECT_TYPE_ALL_LIST_)}
                   />
        </div>
    }
}
const style = {
    head: {
        display: 'flex',
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        titleStyle: {
            color: "#92cdec"
        },
        cleanBtnStyle: {
            color: '#f50',
            borderColor: '#f50',
            height: 20,
            fontSize: 8
        }
    },
    table: {
        borderWidth: 3,
        borderColor: "#92cdec",
        borderStyle: 'solid',
        borderRadius: 4,
        flex: 10
    },
};

export default  connect(state=>state.app,{clear_data_list,select_one_data})(AllRequestList);